<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1000px">
			<el-tabs v-model="state.dialog.type" type="border-card">
				<el-tab-pane name="en" label="英文" />
				<el-tab-pane name="lo" label="老挝语" />
			</el-tabs>
			<el-form ref="formRef" :model="state.translationForm">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-divider content-position="left">翻译内容</el-divider>
					</el-col>
					<el-col :span="12">
						<el-divider content-position="left">{{ state.dialog.type === 'en' ? '英文翻译' : '老挝翻译' }}</el-divider>
					</el-col>
				</el-row>
				<el-tabs v-model="state.ruleForm.tabs_type">
					<el-tab-pane label="基本信息" :name="1">
						<el-row class="mb20" :gutter="20">
							<el-col :span="12">
								<el-form-item label="商品名称">
									<el-input v-model="state.translationForm.title.zh" disabled />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="商品名称">
									<el-input
										v-model="state.translationForm.title[state.dialog.type]"
										:class="{
											w83: state.originalForm.title[state.dialog.type] !== state.translationForm.title[state.dialog.type],
										}"
										placeholder="请输入商品名称"
									/>
									<el-button
										v-if="state.originalForm.title[state.dialog.type] !== state.translationForm.title[state.dialog.type]"
										type="primary"
										@click="onTranslateEdit(state.translationForm.title)"
									>
										修改
									</el-button>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="state.translationForm.descri" class="mb20" :gutter="20">
							<el-col :span="12">
								<el-form-item label="商品描述">
									<el-input v-model="state.translationForm.descri.zh" type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" disabled />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="商品描述">
									<el-input
										v-model="state.translationForm.descri[state.dialog.type]"
										type="textarea"
										:autosize="{ minRows: 4, maxRows: 4 }"
										:class="{
											w83: state.originalForm.descri[state.dialog.type] !== state.translationForm.descri[state.dialog.type],
										}"
										placeholder="请输入商品描述"
									/>
									<el-button
										v-if="state.originalForm.descri[state.dialog.type] !== state.translationForm.descri[state.dialog.type]"
										type="primary"
										@click="onTranslateEdit(state.translationForm.descri)"
									>
										修改
									</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="图片信息" :name="2">
						<el-row class="mb20" :gutter="20">
							<el-col :span="12">
								<el-form-item label="商品主图">
									<ImageUploadCOS
										v-model="state.ruleForm.thumb"
										image-size="750*750"
										path="goods/thumb"
										:is-dialog-upload="state.dialog.isShowDialog"
									/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="商品主图">
									<ImageUploadCOS
										v-if="state.dialog.type === 'en'"
										v-model="state.ruleForm.thumb_en"
										image-size="750*750"
										path="goods/thumb"
										:is-dialog-upload="state.dialog.isShowDialog"
									/>
									<ImageUploadCOS
										v-else
										v-model="state.ruleForm.thumb_lo"
										image-size="750*750"
										path="goods/thumb"
										:is-dialog-upload="state.dialog.isShowDialog"
									/>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row class="mb20" :gutter="20">
							<el-col :span="12">
								<el-form-item label="商品视频">
									<ImageUploadCOS
										v-model="state.ruleForm.thumb_video"
										:file-size="50"
										:file-type="['mp4', '3gp', 'mov', 'm4v']"
										path="goods/video"
										:is-dialog-upload="state.dialog.isShowDialog"
										video
									/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="商品视频">
									<ImageUploadCOS
										v-if="state.dialog.type === 'en'"
										v-model="state.ruleForm.thumb_video_en"
										:file-size="50"
										:file-type="['mp4', '3gp', 'mov', 'm4v']"
										path="goods/video"
										:is-dialog-upload="state.dialog.isShowDialog"
										video
									/>
									<ImageUploadCOS
										v-else
										v-model="state.ruleForm.thumb_video_lo"
										:file-size="50"
										:file-type="['mp4', '3gp', 'mov', 'm4v']"
										path="goods/video"
										:is-dialog-upload="state.dialog.isShowDialog"
										video
									/>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row class="mb20" :gutter="20">
							<el-col :span="12">
								<el-form-item label="商品轮播图">
									<ImageUploadDraggableCOS
										v-model="state.ruleForm.images"
										is-delete
										image-size="800*800，可拖拽改变图片顺序"
										:limit="4"
										path="goods/images"
									/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="商品轮播图">
									<ImageUploadDraggableCOS
										v-if="state.dialog.type === 'en'"
										v-model="state.ruleForm.images_en"
										image-size="800*800，可拖拽改变图片顺序"
										:limit="4"
										path="goods/images"
									/>
									<ImageUploadDraggableCOS
										v-else
										v-model="state.ruleForm.images_lo"
										image-size="800*800，可拖拽改变图片顺序"
										:limit="4"
										path="goods/images"
									/>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="商品详情图">
									<ImageUploadDraggableCOS
										v-model="state.ruleForm.details"
										is-delete
										image-size="宽750，高1000以内，可拖拽改变图片顺序"
										path="goods/details"
									/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="商品详情图">
									<ImageUploadDraggableCOS
										v-if="state.dialog.type === 'en'"
										v-model="state.ruleForm.details_en"
										image-size="宽750，高1000以内，可拖拽改变图片顺序"
										path="goods/details"
									/>
									<ImageUploadDraggableCOS
										v-else
										v-model="state.ruleForm.details_lo"
										image-size="宽750，高1000以内，可拖拽改变图片顺序"
										path="goods/details"
									/>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="规格信息" :name="3">
						<div v-for="item in state.specifications" :key="item.id">
							<el-row class="mb20" :gutter="20">
								<el-col :span="12">
									<el-form-item label="规格名称">
										<el-input v-model="item.name" disabled />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="规格名称">
										<el-input
											v-model="item[state.dialog.type]"
											:class="{ w83: state.originalForm['specs_' + item.specs_id][state.dialog.type] !== item[state.dialog.type] }"
											placeholder="请输入规格名称"
										/>
										<el-button
											v-if="state.originalForm['specs_' + item.specs_id][state.dialog.type] !== item[state.dialog.type]"
											type="primary"
											@click="onTranslateEdit(item, 1)"
										>
											修改
										</el-button>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row v-for="item1 in item.leaf" :key="item1.id" class="mb20" :gutter="20">
								<el-col :span="12">
									<el-form-item label="规格值">
										<el-input v-model="item1.name" disabled />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="规格值">
										<el-input
											v-model="item1[state.dialog.type]"
											:class="{ w83: state.originalForm['specs_item_' + item1.specs_item_id][state.dialog.type] !== item1[state.dialog.type] }"
											placeholder="请输入规格值"
										/>
										<el-button
											v-if="state.originalForm['specs_item_' + item1.specs_item_id][state.dialog.type] !== item1[state.dialog.type]"
											type="primary"
											@click="onTranslateEdit(item1, 1)"
										>
											修改
										</el-button>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
			<template v-if="state.ruleForm.tabs_type === 2" #footer>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default"> 提 交 </el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { reactive } from 'vue';
import { goodsApi, langApi } from '/@/api/supplier';

const GoodsApi = goodsApi();
const LangApi = langApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: 'en',
		title: '翻译管理',
		submitLoading: false,
	},
	ruleForm: {
		goods_id: '',
		tabs_type: 1,
		thumb: '',
		thumb_en: '',
		thumb_lo: '',
		thumb_video: '',
		thumb_video_en: '',
		thumb_video_lo: '',
		images: '',
		images_en: '',
		images_lo: '',
		details: '',
		details_en: '',
		details_lo: '',
	} as any,
	originalForm: {
		title: {},
		descri: {},
	} as any,
	translationForm: {
		title: {},
		descri: {},
	} as any,
	specifications: [] as any,
});

/********** 触发事件 **********/
// 修改翻译
const onTranslateEdit = (params: any, type: number = 0) => {
	if (!params[state.dialog.type]) return ElMessage.warning('请修改内容不能为空');
	_langGoodsEdit({ lang_goods_id: params.id, [state.dialog.type]: params[state.dialog.type] }, type ? '' : params.tag);
};
// 提交其他语言图片
const onSubmit = () => {
	_goodsEdit(state.ruleForm);
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	state.dialog.type = 'en';
	state.ruleForm = {
		goods_id: '',
		tabs_type: 1,
		thumb: '',
		thumb_en: '',
		thumb_lo: '',
		thumb_video: '',
		thumb_video_en: '',
		thumb_video_lo: '',
		images: '',
		images_en: '',
		images_lo: '',
		details: '',
		details_en: '',
		details_lo: '',
	};
	state.specifications = [];
	state.originalForm = state.translationForm = {
		title: {},
		descri: {},
	};
	_goodsSelect({ goods_id: row.id });
};

/********** 网络请求 **********/
// 获取商品商品信息
const _goodsSelect = (params: Object) => {
	GoodsApi.goodsSelect(params).then((res) => {
		const info: any = res.data.info;
		state.ruleForm = info;
		state.ruleForm.goods_id = info.id;
		state.ruleForm.tabs_type = 1;
		const trans = res.data.info.trans;
		state.specifications = res.data.specifications.specifications;
		if (!Object.keys(trans).length) return;
		state.originalForm = JSON.parse(JSON.stringify(trans));
		state.translationForm = trans;
		const specifications = state.specifications.map((item: any) => {
			let leaf: Array<any> = [];
			item.leaf.map((item1: any) => {
				leaf.push({
					...item1,
					...state.originalForm['specs_item_' + item1.id],
					specs_item_id: item1.id,
				});
			});
			return {
				...item,
				...state.originalForm['specs_' + item.id],
				leaf: leaf,
				specs_id: item.id,
			};
		});
		state.specifications = specifications;
		console.log('specifications', specifications);
	});
};
// 商品相关单个翻译保存
const _langGoodsEdit = (params: Object, str: string) => {
	LangApi.langGoodsEdit(params)
		.then(() => {
			ElMessage.success('操作成功！');
			if (!str) return;
			state.originalForm[str] = state.translationForm[str];
		})
		.catch(() => {
			if (!str) return;
			state.translationForm[str] = state.originalForm[str];
		});
};
// 编辑商品
const _goodsEdit = (params: Object) => {
	GoodsApi.goodsEdit(params)
		.then(() => {
			ElMessage.success('图片上传成功！');
			state.dialog.submitLoading = false;
		})
		.catch(() => _goodsSelect({ goods_id: state.ruleForm.goods_id }));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
